<template>
  <div class="">
    <form>
      <!--          用户账号信息-->
      <div class="border-bottom mb-4">
        <label class="" style="color: #0f5da2;font-size: 20px;font-weight: bold">账号信息</label>
      </div>
      <div class="form-group">
        <label for="inputPhone">手机号</label>
        <input type="phone" class="form-control" id="inputPhone" v-model="PersonAccount.phone" >
        <small id="phoneHelpBlock" class="form-text text-muted">
          手机号不可重复注册！
        </small>
      </div>
      <div class="form-group">
        <label for="inputPassword">旧密码</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="请输入旧密码"  v-model="PersonAccount.old_pwd">
      </div>
      <div class="form-group">
        <label for="inputNewPassword">新密码</label>
        <input type="password" class="form-control" id="inputNewPassword" placeholder="请输入新密码"  v-model="PersonAccount.new_pwd">
        <small id="passwordHelpBlock1" class="form-text text-muted">
          （密码至少包含数字和英文，长度6-20）
        </small>
      </div>
      <div class="form-group">
        <label for="inputNewPassword1">确认密码</label>
        <input type="password" class="form-control" id="inputNewPassword1" placeholder="再次输入"  v-model="PersonAccount.new_pwd_again">
      </div>
      <div class="btn-group" role="group">
        <button type="submit" class="btn mt-4" style="background-color: #B7C1AC;color: white" @click="updateAccount()">保存信息</button>
      </div>
      <div class="btn-group ml-4" role="group">
        <button type="submit" class="btn mt-4" style="background-color: #B7C1AC;color: white" @click="clearInput()">重&nbsp;&nbsp;置</button>
      </div>
    </form>
  </div>
</template>

<script>
import {getUser_Account,updateUserAccountByUser} from '@/api/User'

export default {
  name: "person_account",
  data(){
    return{
      PersonAccount:{
        phone:'',
        old_pwd:'',
        new_pwd:'',
        new_pwd_again:''

      }
    }
  },
  methods:{
    // 获取当前用户账号信息
    init(){
      getUser_Account({
        // token: window.sessionStorage.getItem('token')
      }).then(res=>{
        this.PersonAccount.phone=res.data.phone;
      })
    },
    updateAccount(){
      var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;   //合法的手机号
      var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/; //密码至少包含 数字和英文，长度6-20
      if(this.PersonAccount.phone.length==0){
        this.$msg.warning('手机号不能为空！');
        return false;
      }
      if(!myreg.test(this.PersonAccount.phone))
      {
        this.$msg.warning('手机号不合法，请重新输入！');
        return false;
      }
      if(this.PersonAccount.old_pwd.length==0){
        this.$msg.warning('请输入旧密码！');
        return false;
      }
      if(this.PersonAccount.new_pwd.length==0){
        this.$msg.warning('请输入新密码！');
        return false;
      }
      if(!reg.test(this.PersonAccount.new_pwd))
      {
        this.$msg.warning('密码至少包含数字和英文，长度为6-20！');
        return false;
      }
      if(this.PersonAccount.new_pwd_again.length==0){
        this.$msg.warning('请再次输入密码！');
        return false;
      }
      if(this.PersonAccount.new_pwd!=this.PersonAccount.new_pwd_again){
        this.$msg.warning('两次输入的密码不一致，请重新输入！');
        this.PersonAccount.new_pwd_again="";
        return false;
      }

      updateUserAccountByUser({
        // token: window.sessionStorage.getItem('token'),
        phone:this.PersonAccount.phone,
        old_pwd:this.PersonAccount.old_pwd,
        new_pwd:this.PersonAccount.new_pwd
      }).then(res=>{
        if(res.data.result==1){
          this.$msg.success('修改成功，请重新登录！');
          sessionStorage.clear();
          this.$router.push({path:'/Login'});
        }
        else if(res.data.result== 2){
          this.$msg.warning('旧密码错误，请重新输入！')
          this.PersonAccount.old_pwd="";
        }
        else if(res.data.result== -1){
          this.$msg.warning('手机号已存在，请勿重复！')
          this.clearInput();    //清空输入框
        }
        else if(res.data.result== 0){
          this.$msg.error('修改失败！');
        }
      })



    },
    //重置  清空输入框
    clearInput(){
      this.PersonAccount.phone="";
      this.PersonAccount.old_pwd="";
      this.PersonAccount.new_pwd="";
      this.PersonAccount.new_pwd_again="";
    }





  },
  created() {
    let _this=this;

    _this.init();


  },



}
</script>

<style scoped>
.form-group{
  padding:6px;
}
</style>
